<template>
  <section class="RoleSearch-container">
    <quick-search-layout>
      <template slot="condition">
        <el-form
          :model="condition"
          label-position="top"
          inline
          size="small"
          ref="form"
          label-width="0"
        >
          <el-form-item prop="name">
            <el-input
              v-model="condition.name"
              placeholder="输入角色名称"
              clearable
            >
            </el-input>
          </el-form-item>

          <el-button
            size="small"
            explain
            type="primary"
            icon="el-icon-search"
            @click="getRoles"
            >搜索</el-button
          >
          <el-button size="small" explain icon="el-icon-refresh" @click="reset"
            >重置</el-button
          >
        </el-form>
      </template>

      <slot slot="list" />

      <template slot="pagination">
        <el-pagination
          @size-change="getRoles"
          @current-change="getRoles"
          :current-page.sync="condition.page_index"
          :page-sizes="[5, 8, 10, 20, 30, 40, 50, 100, 200]"
          :page-size.sync="condition.page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        />
      </template>
    </quick-search-layout>
  </section>
</template>

<script>
import _api from "@/common/api/role";

export default {
  data() {
    return {
      total: 0,
      condition: {
        username: "",
        name: "",
        page_index: 1,
        page_size: 10,
      },
    };
  },
  methods: {
    async getRoles() {
      try {
        const result = await _api.getListAsync(this.condition);
        this.total = +result.total;
        this.$emit("onSearch", result.data);
      } catch (error) {}
    },
    async reset() {
      this.$refs.form.resetFields();
      this.getRoles();
    },
  },
  mounted() {
    this.getRoles();
  },
};
</script>

<style lang="scss" scoped>
.RoleSearch-container {
  height: 100%;
}
</style>